<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="search-box">
        <el-button size="small" type="primary" @click="handleAdd()"><i class="el-icon-plus"></i><span>添加管理员</span></el-button>
      </div>
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
        <el-table-column label="序号" width="120" prop="id"></el-table-column>
        <el-table-column label="管理员信息"  prop="parent_name">
          <template slot-scope="scope"> 
              <div style="display: flex;justify-content: center;">
                <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.wxUserInfo ? scope.row.wxUserInfo.wx_avator : ''"></el-image>
                <p>{{scope.row.admin.real_name}}</p>
              </div>
            </template>
        </el-table-column>
        <el-table-column label="绑定时间" prop="admin.create_time"></el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-popover placement="top" width="160" v-model="tipVisibles[scope.row.id]">
              <p>确定解绑吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="canel(scope.row.id)">取消</el-button>
                <el-button type="primary" size="mini" @click="handleEdit(scope.row.sign)">确定</el-button>
              </div>
              <el-button size="mini" type="danger" slot="reference" >解绑</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
    <el-dialog title="绑定二维码" :visible.sync="addMerchant" :show-close="false" width="20%" :close-on-click-modal="false">
      <div class="qrcode-box">
        <div id="qrcode" ref="qrcCode" class="qrcode"></div>
      </div>
      <div slot="footer" class="dialog-footer">
          <el-button @click="closeCode">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import QRCode  from "qrcodejs2"
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import writeOffApi from "@/api/writeOff";
@Component({
  components: {QRCode}
})
export default class writeOffList extends Vue {
  // @Getter("user") getUser: any;
  visible:boolean = false
  @Provide() tipVisibles: any = [];
  @Provide() state: string = "1"; // 状态默认值
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Prop({}) tabVisible!: any;
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/writeOffList'){
      this.tabShow=this.tabVisible;
    }
  }
  addMerchant:boolean = false
  shop_id:any=""
  link:any = ''
  timer:any
  created() {
    this.shop_id = this.$route.query.id
    if(this.$route.path!='/writeOffList'){
      this.tabShow=false
    }
    this.loadData();
  }
headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  loadData() {
   writeOffApi.getBindAdmin(this.page,this.size,this.shop_id)
      .then((res: any) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.loading=false
      });
  }

  canel(index) {
      this.tipVisibles[index] = false;
      this.tipVisibles.splice(index, 1, false);
      this.$set(this.tipVisibles, index, false);
  }
  handleAdd() {
    writeOffApi.createCode({shop_id:this.shop_id})
    .then((res:any)=>{
      if(res.data.status){
          this.link = res.data.data.url+'?sign='+res.data.data.param
          this.addMerchant = true
          this.qrcode()
        }else{
          this.$message({
          message: res.data.msg,
          type: "error"
          });
        }
    })
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  handleEdit(sign:any):void {
    writeOffApi.cancelBind({sign})
      .then((res:any)=>{
        if(res.data.status){
            this.$message({
              message: '操作成功',
              type: "success"
            });
          this.loadData()
        }else{
          this.$message({
          message: res.data.msg,
          type: "error"
          });
        }
        this.visible = false
      })
  }
  qrcode () {
    let that = this;
    this.$nextTick(() => {
      var qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200,        // 高度
        text:  that.link,   // 二维码内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
      })

    })
    
  }
  closeCode () {
    (this.$refs.qrcCode as any).innerHTML = ''
    this.addMerchant =false
    clearInterval(this.timer); 
    this.loadData();
  }
}
</script>
<style scoped>
.qrcode-box {
  text-align: center;
}
.qrcode {
  display: inline-block;
  width: 200px;
  height: 200px;
}
</style>